<template>
    <ConfigProvider
        :locale="zhCN"
        :theme="{
            token: {
                colorPrimary: '#2D51A0',
                colorTextBase: '#3D3D3D',
                colorTextDisabled: 'rgba(144, 147, 153,  1)',
                fontFamily: '',
            },
            components: {
                Tree: {
                    colorText: '#3D3D3D',
                },
                TreeSelect: {
                    colorText: '#3D3D3D',
                },
                Tabel: {
                    colorText: '#3D3D3D',
                },
            },
        }"
    >
        <StyleProvider
            hash-priority="high"
            :transformers="[legacyLogicalPropertiesTransformer]"
        >
            <router-view />
        </StyleProvider>
    </ConfigProvider>
</template>
<script setup lang="ts">
    import zhCN from "ant-design-vue/es/locale/zh_CN";
    import dayjs from "dayjs";
    import "dayjs/locale/zh-cn";
    import {
        ConfigProvider,
        StyleProvider,
        legacyLogicalPropertiesTransformer,
    } from "ant-design-vue";
    dayjs.locale("zh-cn");

    const getPopupContainer = (el: any) => {
        let parentNode = el.parentNode;
        if (el && parentNode) {
            return parentNode;
        }
        return document.body;
    };
</script>

<style lang="scss">
    @import "./styles/font";
    html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    #app {
        width: 100%;
        height: 100%;
    }
    #app {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        height: 100%;
        box-sizing: border-box;
        // overflow: auto;
    }
    .page-header-sub-menu {
        // .ant-menu-sub {
        //     display: none;
        // }
        .ant-menu-item {
            height: 36px !important;
            border-radius: 4px;
            &:hover {
                background: #f2f3f5 !important;
                color: #1f2329;
            }
            &.ant-menu-item-selected {
                color: #2d51a0;
                font-weight: 700;
                background: #f6f9ff;
            }
        }
    }
    .user-center-dropdown {
        .ant-dropdown-menu-item {
            &:hover {
                color: $primary-color !important;
                font-weight: 700 !important;
                background: #f6f9ff !important;
            }
        }
    }
</style>
